<!doctype html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>[实战]47厦门公交车</title>
    <link rel="stylesheet" href="src/bus.css">
</head>

<body>
    <div class="bus">
        <div class="header">
            <div class="nameinfo">
                <div class="namefrom">
                    <h2>{{businfo.name}}路</h2>
                    <div class="fromto" v-if="businfo.station">
                        <span>{{businfo.station[0].sname}}</span>
                        <i @click="reverse"></i>
                        <span>{{businfo.station[businfo.station.length-1].sname}}</span>
                    </div>
                </div>
                <div class="times" v-if="businfo.station">
                    首班：{{businfo.station[0].begin}} 末班：{{businfo.station[0].end}}
                </div>
            </div>
            <div class="curstation" v-if="businfo.station">
                <h2>{{businfo.station[current-1].sname}}</h2>
                <h3 v-if="current<businfo.station.length">下一站：{{businfo.station[current].sname}}</h3>
                <h3 v-else>已到达终点站</h3>
            </div>
        </div>
        <div class="body">
            <ul>
                <li v-for="(item,inx) in businfo.station" :class="{pass:inx<current,current:inx==current-1,mypos:item.sname==mypos}">
                    <div class="stname">{{item.sname}}</div>
                    <div class="quanline">
                        <div class="quan"></div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

    <script src="src/bus.js"></script>
    <script>
"use strict";new Vue({el:".bus",data:{tbus:"97",direction:1,current:1,businfo:[],mypos:"开禾路口站"},mounted:function(){var t=this,e=bus.filter(function(e){return e.name==t.tbus});this.businfo=e[0],setInterval(function(){t.current+=1,t.current>t.businfo.station.length&&t.reverse()},1e3)},computed:{},watch:{direction:{immediate:!0,handler:function(t){this.businfo.station&&this.businfo.station.reverse()}}},methods:{reverse:function(){1==this.direction?this.direction=-1:this.direction=1,this.current=1}}});
    </script>
</body>

</html>
